<template>
    <div class="list" ref="wrapper">
        <div>
            <div class="area">
                <div class="title border-topbottom">当前城市</div>
                <div class="button-list">
                    <div class="button-wrapper">
                        <div class="button">{{this.currentCity}}</div>
                    </div>
                </div>
            </div>
            <div class="area">
                <div class="title border-topbottom">热门城市</div>
                <div class="button-list">
                    <div class="button-wrapper" v-for="hotItem of hotcities" :key="hotItem.id" @click="handleCityClick(hotItem.name)">
                        <div class="button">{{hotItem.name}}</div>
                    </div>
                </div>
            </div>
            <!-- 因为cities是一个对象，所以（item ，key）是key，而不是index -->
            <div class="area" v-for="(item,key) of cities" :key="key" :ref="key">
                <div class="title border-topbottom">{{key}}</div>
                <div class="item-list">
                    <div class="item  border-bottom" v-for="inner of item" :key="inner.id" @click="handleCityClick(inner.name)">{{inner.name}}</div>
                </div>
            </div>
        </div>
    </div>

</template>
<script>
import Bscroll from "better-scroll"; //使用better-scroll时要提前安装，然后到导入文件里
import {mapState,mapMutations} from 'vuex'
export default {
    name: "cityList",
    props: {
        cities: Object,
        hotcities: Array,
        letter: String
    },
    computed:{
    // ...mapState({
    //     currentCity :'city'//也可以是对象的形式，意思是mapState把vuex里的city映射到名为city的计算属性中，并且命名为currentCity
    // })
    ...mapState({
        currentCity:state=>state.city//也可以是对象的形式，意思是mapState把vuex里的city映射到名为city的计算属性中，并且命名为currentCity
    })
    //  ...mapState(['city'])
    },
    mounted() {
        this.scroll = new Bscroll(this.$refs.wrapper, {
            click: true
        }); //this.$refs.wrapper为Dom元素
    },
    methods: {
        handleCityClick: function(city) {
            //this.$store.dispatch("changeCity", city); //触发一个changeCity的一个action
            //this.$store.commit('changeCity',city)//或者直接略过action也是可以的
             this.$router.push('/')//跳转到根路径
             this.changeCity(city)//this.$store.dispatch("changeCity", city);改为
        },
        ...mapMutations(['changeCity'])//有一个Mutations叫changeCity，然后将这个mutation映射到这个组件的一个名字叫changeCity的方法里，
    },
    watch: {
        letter() {
            if (this.letter) {
                const element = this.$refs[this.letter][0]; //通过refs的this.letter对应页面ref对应字母的区域
                // console.log(element)因为ref=“key”是通过循环输出的，因此this.$refs[this.letter]此方法等到的element是一个数组，所以在其后面加上【0】
                this.scroll.scrollToElement(element); //可以让better-scroll自动滚动到element指定区域
            }
        }
    }
};
</script>
<style lang="stylus" scoped>
@import '~styles/variable.styl';

.border-topbottom {
    &:before {
        border-color: #ccc;
    }

    &:after {
        border-color: #ccc;
    }
}

.border-bottom {
    &:before {
        border-color: #ccc;
    }

    &:after {
        border-color: #ccc;
    }
}

.list {
    overflow: hidden;
    position: absolute;
    top: 1.58rem;
    left: 0;
    right: 0;
    bottom: 0;

    .title {
        line-height: 0.54rem;
        background: #eeeeee;
        padding-left: 0.2rem;
        font-size: 0.26rem;
        color: #666;
    }

    .button-list {
        overflow: hidden;
        padding: 0.1rem 0.6rem 0.1rem 0.1rem;

        .button-wrapper {
            float: left;
            width: 33.33%;

            .button {
                text-align: center;
                margin: 0.1rem;
                border: 0.02rem solid #ccc;
                padding: 0.1rem 0;
                border-radius: 0.06rem;
            }
        }
    }

    .item-list {
        .item {
            line-height: 0.76rem;
            padding-left: 0.2rem;
        }
    }
}
</style>
